<template>
  <div>
    <header class="heading affix dock-top dock-auto">
      <div class="title">
        <div class="slidediv">
          <i class="icon-chevron-left avatar" @click="jumpToBack"></i>
          <input name="search" id="search" class="input" v-model="keyword" ref="keyword" rel="popover" />
          <a @click="search"><i class="icon-search avatar"></i></a>
        </div>
      </div>
    </header>
    <div class="offcanvas offcanvas-start width60" tabindex="-1" id="offcanvasExample"
      aria-labelledby="offcanvasExampleLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasExampleLabel">我的主页</h5>
        <!-- <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button> -->
      </div>
      <Menu></Menu>
    </div>
    <div class="top mt-5">
      <section class="container">
        <div class="row mt-1">
          <a class="col-sm-4 h7" v-for="(item, index) in booklist" :key="index" @click="jumpTo(item)">
            <dt class="img-box"><img :src="item.imgurl ? item.imgurl : '/static/img/' + item.id + '.png'"></dt>
            <dd class="mt-1 text-content">
              <p>{{ item.name.length > 42 ? item.name.substring(0, 42) + "..." : item.name }}</p>
              <p>{{ item.author }}</p>
              <p>{{ item.content }}</p>
            </dd>
          </a>
        </div>
      </section>
    </div>
  </div>
</template>
<script>
import Header from './components/Header.vue'
export default {
  components: { Header },
  data() {
    return {
      flag: false,
      keyword: '',
      pagenum: 0,
      retlist: null,
      booklist: []
    }
  },
  mounted() {
    this.flag = !this.flag
  },
  methods: {
    search() {
      if (this.keyword != null && this.keyword !== '') {
        this.$http.get('api/search?keyword=' + this.keyword).then((response) => {
          this.booklist = response.data.data
          this.$refs.keyword.popover(response.data.msg)
        })
      }
    },
    jumpTo(target) {
      this.$router.push({
        path: '/cover',
        query: {
          name: target.name,
          imgurl: target.imgurl,
          author: target.author,
          content: target.content,
          count: target.count,
          star: target.star,
          update_time: target.update_time,
          taps: target.taps,
          collection: target.collection,
          id: target.id
        }
      })
      // this.$router.push({path:'/cover', query: {target: target}})
    },
    jumpToBack() {
      this.$router.back()
    }
  }
}
</script>

<style lang='scss' scoped>
.imgicon {
  width: 25%;
}

.slidediv {
  display: flex;
  min-width: 1.5rem !important;
}

.text-content {
  text-align: justify;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  padding-left: 1rem;
  width: 70%;
}

.img-box {
  max-height: 7rem;
  height: 90%;
  width: 25%;
}

.top {
  border-radius: 0.3rem;
  background-color: white;
  margin-top: 0.2rem;

  .container {

    .row {
      .col-sm-4 {
        background-color: white;
        border: px2rem(3) solid #ffffff;
        display: flex;
        align-items: center;
        margin-left: px2rem(10);

        // justify-content: space-between;
        .content {
          padding-left: 1rem;
          width: 70%;
        }
      }
    }
  }
}

.h7 {
  max-height: 7rem;
  border-bottom: 1px solid #ebebeb;
}
</style>
